<template>
	<!-- 主体内容区域 -->
	<div class="content">
		<!-- 头部区域 -->
		<div class="top">
			<h5 class="a">用户</h5>
			<h5 class="l-12">/</h5>
			<h5 class="a">添加用户</h5>
			<button @click="backstudent()">返回</button>
		</div>
		<!-- 主要区域 -->
		<div class="main">
			<!-- 主要区域的头部标题 -->
			<h4>请填写用户相关信息</h4>
			<ul class="list">
				<!-- 用户区域 -->
				<li class="item">
					<span>用户昵称<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入用户昵称" v-model="person.name">
				</li>
				<!-- 手机号区域 -->
				<li class="item">
					<span>手机号<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入手机号" v-model="person.phone">
				</li>
				<!-- 付费金额区域 -->
				<li class="item">
					<span>付费金额<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入付费金额" v-model="person.stu_pyp">
				</li>
				<!-- 订单数量区域 -->
				<li class="item">
					<span>订单数量<font style="color: red;">*</font></span>
					<input type="text" placeholder="请输入付费金额" v-model="person.up_pyp">
				</li>
				<!-- 账户禁用 -->
				<li class="item">
					<el-switch v-model="value2" class="mb-2"
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="未付费"
					inactive-text="已付费" />
				</li>
				<!-- 按钮区域 -->
				<li class="btn">
					<button class="add" @click="addStudent()">立即添加</button>
					<button class="cancel" @click="backstudent()">取消</button>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {ref} from 'vue'
	import { addUserStudent } from '../api/api.js'
	export default {
		name: '',
		setup(){
			const person = ref({
				stu_ID: '',
				name:"",
				phone:'',
				stu_pyp: '',
				up_pyp: '',
				stu_tim:'',
				state_s:''
			})
			const value2 = ref(0)
			return{
				value2,
				person
			}
		},
		methods: {
			// 跳转
			backstudent() {
				this.$router.push('/student')
			},
			// 添加
			addStudent(){
				// 获取当前时
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth()+1;
				let dd = new Date().getDate();
				let NowTime = yy+"."+mm+"."+dd

				let _data = this.person
				this.person.state_s = this.value2
				this.person.stu_tim = NowTime
				console.log(_data)
				addUserStudent(_data)
				.then(res => {
					console.log(res)
				})
				.catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}

	.content {
		width: calc(100% - 60px);
		background-color: #f0f0f0;
		padding: 35px 30px;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-bottom: 30px;
	}
	.top>a {
		min-width: 30px;
	}
	.l-12{
		margin: 0 12px;
	}
	.main {
		width: calc(100% - 60px);
		height: 100vh;
		padding: 30px;
		background-color: #fff;
	}

	.main>h4{
		margin-bottom: 30px;
	}
	.list {
		width: 100%;
	}

	.item {
		height: 75px;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}


	.item>span {
		width: 80px;
		font-weight: bold;
		margin-right: 38px;
	}

	.item>input {
		width: 240px;
		height: 30px;
		outline: none;
		border: 1px solid #959595;
		padding: 0 10px;
		border-radius: 4px;
	}

	.add-box {
		width: 100%;
		height: 100%;
		margin-left: 8px;
	}

	.add-box>.add {
		width: 80px;
		height: 80px;
		background-color: #fafafa;
		border-radius: 2px;
		padding-top: 5px;
		margin-bottom: 7px;
	}

	.add>.title {
		text-align: center;
		font-size: 28px;
		color: #929292;
		margin: 10px 0 0 0;
	}

	.add>p {
		text-align: center;
	}

	.top>button {
		margin-left: 86%;
		width: 68px;
		height: 30px;
		text-align: center;
		border: none;
		background: #38a28a;
		color: #fff;
		border-radius: 4px;
		cursor: pointer;
	}
	.btn{
		width: 220px;
		height: 48px;
		margin: 0 0 0 116px;
	}
	.btn>button{
		text-align: center;
		line-height: 32px;
		height: 32px;
		outline: none;
		cursor: pointer;
		border-radius: 4px;
		color: #fff;
		border: none;
	}
	.btn>button:nth-child(1){
		width: 78px;
		margin-right: 20px;
		background-color: #38a28a;
	}
	.btn>button:nth-child(2){
		width: 60px;
		border: 1px solid #e9ebf0;
		color: #101010;
	}
</style>
